﻿<div>

<script type="text/javascript">
    $(function () {
        var columnFilter = { panelHeight: 100, position: "top" }, t = $("#t1").treegrid({
            title: 'test treegrid',
            width: 900,
            height: 400,
            method: "get",
            url: "treegrid/treegrid-data.json",
            idField: 'id',
            treeField: 'name',
            remoteSort: false,
            frozenColumns: [[
                { field: 'ck', checkbox: true },
                { field: 'id', title: 'ID(id)', width: 80, sortable: true }
            ]],
            columns: [[
                { field: 'name', title: '名称(name)', width: 180, filter: "livebox" },
                { field: 'age', title: '年龄(age)', width: 120, filter: "caps" },
                { field: 'weight', title: '体重(weight)', width: 120, filter: "lower" },
                { field: 'size', title: 'Size(size)', width: 140, filterable: false },
                { field: 'date', title: '日期(date)', width: 140 },
                { field: 'undefined', title: '测试(不存在的字段)', width: 140 }
            ]],
            columnFilter: columnFilter,
            enableHeaderClickMenu: false,
            enableHeaderContextMenu: false,
            enableRowContextMenu: false
        });

        $("#Button1").click(function () {
            t.treegrid("setColumnFilter", columnFilter);
        });

        $("#Button2").click(function () {
            t.treegrid("setColumnFilter");  //此处传入 null 亦可
        });

        $("#Button3").click(function () {
            t.treegrid("setColumnFilter", $.extend({}, columnFilter, { position: "top" }));
        });

        $("#Button4").click(function () {
            t.treegrid("setColumnFilter", $.extend({}, columnFilter, { position: "bottom" }));
        });

        $("#Button5").click(function () {
            t.treegrid("showRows", true);     //等效于 t.treegrid("columnFilterSelect", true);
        });

        $("#Button6").click(function () {
            t.treegrid("hideRows", true);     //等效于 t.treegrid("columnFilterSelect", false);
        });

        $("#Button7").click(function () {
            var fields = t.treegrid("getColumnFields", "all"), t1 = $("#Text1"), t2 = $("#Text2"), field = t1.val(), value = t2.val();
            if (!$.array.contains(fields, field)) {
                $.messager.show("操作提醒", "请输入当前控件中存在的 field 值", "warning");
                t1.focus();
                return;
            }
            t.treegrid("columnFilterSelect", { field: field, value: value, selected: true })
        });

        $("#Button8").click(function () {
            var fields = t.treegrid("getColumnFields", "all"), t1 = $("#Text1"), t2 = $("#Text2"), field = t1.val(), value = t2.val();
            if (!$.array.contains(fields, field)) {
                $.messager.show("操作提醒", "请输入当前控件中存在的 field 值", "warning");
                t1.focus();
                return;
            }
            t.treegrid("columnFilterSelect", { field: field, value: value, selected: false })
        });

        $("#Button9").click(function () {
            t.treegrid("columnFilterSelect", { field: "id", value: [1, 2, 3], selected: true });
        });

        $("#Button10").click(function () {
            t.treegrid("columnFilterSelect", { field: "name", value: ["B", "C", "D"], selected: false });
        });
    });
</script>

<h2>jEasyUI TreeGrid Extensions - 过滤器操作</h2>
<p>该部分扩展由文件 jeasyui.extensions.treegrid.js 实现。</p>
<hr />
<input id="Button1" type="button" value="启用表头过滤器" />
<input id="Button2" type="button" value="禁用表头过滤器" />
<input id="Button3" type="button" value="将表头过滤器设置到列标题上方" />
<input id="Button4" type="button" value="将表头过滤器设置到列标题下方" />
<input id="Button5" type="button" value="全部选择" />
<input id="Button6" type="button" value="全部不选" />
<hr />
<input id="Button7" type="button" value="选择指定的字段中指定的值" />
<input id="Button8" type="button" value="不选指定的字段中指定的值" />
<label for="Text1">请输入字段的 Field 值:</label><input id="Text1" type="text" />
<label for="Text2">请输入要操作的值:</label><input id="Text2" type="text" />
<hr />
<input id="Button9" type="button" value="选中多个值" />该按钮点击后选中 id 列的 "1, 2, 3" <br /><br />
<input id="Button10" type="button" value="不选多个值" />该按钮点击后不选 name 列的 "B, C, D" 
<hr />
<table id="t1"></table>

</div>